<MudDrawer Breakpoint="Breakpoint.Md"
           Class="side-menu"
           Elevation="0"
           MiniWidth="100px"
           Open="SideMenuDrawerOpen"
           OpenChanged="@(e => SideMenuDrawerOpenChanged.InvokeAsync(e))"
           OpenMiniOnHover="true"
           Variant="@(CanMiniSideMenuDrawer ? DrawerVariant.Mini : DrawerVariant.Responsive)"
           Width="280px">
    <MudDrawerHeader Class="align-center d-flex justify-center pa-0">
        <MudIcon Class="@(SideMenuDrawerOpen ? "ml-6" : "")"
                 Color="Color.Primary"
                 Icon="@Icons.Custom.Brands.MudBlazor"
                 Size="Size.Large" />

        @if (SideMenuDrawerOpen)
        {
            <MudSpacer />
            <MudTooltip Arrow="true"
                        Text="Mini Menu">
                <MudToggleIconButton Class="mr-2"
                                     Color="@Color.Error"
                                     Icon="@Icons.Material.Filled.MenuOpen"
                                     Size="Size.Small"
                                     Toggled="CanMiniSideMenuDrawer"
                                     ToggledChanged="@(e => CanMiniSideMenuDrawerChanged.InvokeAsync(e))"
                                     ToggledColor="@Color.Primary"
                                     ToggledIcon="@Icons.Material.Filled.MenuOpen"
                                     ToggledSize="Size.Small" />
            </MudTooltip>
        }
    </MudDrawerHeader>

    @if (SideMenuDrawerOpen)
    {
        <div class="mx-6">
            <MudButton Class="d-flex justify-start my-6 user-button"
                       FullWidth="true">
                <ChildContent>
                    <div class="align-center d-flex">
                        <MudAvatar Image="@User.Avatar" />
                    </div>
                    <div class="d-flex flex-column px-4">
                        <MudText Class="d-flex justify-start"
                                 Typo="Typo.body2">
                            @User.DisplayName
                        </MudText>
                        <MudText Class="d-flex justify-start"
                                 Typo="Typo.caption">
                            @User.Role
                        </MudText>
                    </div>
                </ChildContent>
            </MudButton>
        </div>
    }
    else
    {
        <div class="d-flex justify-center my-6">
            <MudAvatar Image="@User.Avatar" />
        </div>
    }

    <MudNavMenu>
        @foreach (var section in _menuSections)
        {
            @if (SideMenuDrawerOpen)
            {
                <div class="ml-6 my-3">
                    <MudText Typo="Typo.caption">
                        <b>
                            @(section.Title)
                        </b>
                    </MudText>
                </div>
            }

            @foreach (var sectionItem in section.SectionItems)
            {
                @if (sectionItem.IsParent)
                {
                    <MudNavGroup Icon="@sectionItem.Icon"
                                 Title="@sectionItem.Title">
                        @foreach (var menuItem in sectionItem.MenuItems)
                        {
                            @if (SideMenuDrawerOpen)
                            {
                                <MudNavLink Href="@(menuItem.Href)"
                                            Match="NavLinkMatch.All">
                                    @menuItem.Title
                                </MudNavLink>
                            }
                        }
                    </MudNavGroup>
                }
                else
                {
                    <MudNavLink Href="@(sectionItem.Href)"
                                Icon="@(sectionItem.Icon)"
                                Match="NavLinkMatch.All">
                        @sectionItem.Title
                    </MudNavLink>
                }
            }
        }
    </MudNavMenu>
</MudDrawer>

<style>

        .mud-nav-link {
            white-space: normal !important;
            padding: 12px 16px 12px 38px;
        }
        
        .mud-nav-link.active:not(.mud-nav-link-disabled) {
            border-right: 3px solid var(--mud-palette-primary);
            background-color: rgba(var(--mud-palette-primary-rgb), 0.1)
        }
        
        .side-menu {
            border-right: 1px solid var(--mud-palette-table-lines)
        }
        
        .user-button {
            text-transform:none; 
            background: rgba(var(--mud-palette-primary-rgb), 0.1)
        }
       
</style>